<!-- src/components/MessageCloud.vue -->
<template>
  <section id="message-cloud" class="py-20 px-4 md:px-8 bg-neutral-800/50">
    <div class="container mx-auto">
      <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-12 text-center">
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">年度消息云</span>
      </h2>

      <div class="relative h-[400px] md:h-[500px] rounded-2xl bg-neutral-900/70 backdrop-blur-sm overflow-hidden shadow-xl border border-white/5">
        <div class="absolute inset-0 flex items-center justify-center p-8">
          <div class="flex flex-wrap items-center justify-center gap-4" ref="messageCloud">
            <span class="message-cloud-item text-3xl md:text-4xl lg:text-5xl font-bold text-blue-400" style="animation-delay: 0.1s">青龙面板</span>
            <span class="message-cloud-item text-2xl md:text-3xl lg:text-4xl font-medium text-purple-400" style="animation-delay: 0.2s">Docker</span>
            <span class="message-cloud-item text-xl md:text-2xl lg:text-3xl font-medium text-indigo-400" style="animation-delay: 0.3s">Vue</span>
            <span class="message-cloud-item text-2xl md:text-3xl lg:text-4xl font-bold text-pink-400" style="animation-delay: 0.4s">Java</span>
            <span class="message-cloud-item text-lg md:text-xl lg:text-2xl font-normal text-green-400" style="animation-delay: 0.5s">C++</span>
            <span class="message-cloud-item text-lg md:text-2xl lg:text-3xl font-normal text-blue-400" style="animation-delay: 0.7s">Python</span>
            <span class="message-cloud-item text-xl md:text-2xl lg:text-3xl font-medium text-yellow-400" style="animation-delay: 0.6s">逆向</span>
            <span class="message-cloud-item text-2xl md:text-3xl lg:text-4xl font-bold text-red-400" style="animation-delay: 0.7s">e语言</span>
            <span class="message-cloud-item text-base md:text-lg lg:text-xl font-normal text-teal-400" style="animation-delay: 0.8s">京东</span>
            <span class="message-cloud-item text-xl md:text-2xl lg:text-3xl font-medium text-orange-400" style="animation-delay: 0.9s">智聊</span>
            <span class="message-cloud-item text-3xl md:text-4xl lg:text-5xl font-bold text-blue-400" style="animation-delay: 1s">若智云</span>
            <span class="message-cloud-item text-2xl md:text-2xl lg:text-3xl font-bold text-purple-400" style="animation-delay: 1s">小宇</span>
            <span class="message-cloud-item text-1xl md:text-2xl lg:text-2xl font-bold text-yellow-400" style="animation-delay: 1s">软路由</span>
            <span class="message-cloud-item text-2xl md:text-3xl lg:text-2xl font-bold text-yellow-100" style="animation-delay: 1s">喜羊羊</span>
            <span class="message-cloud-item text-3xl md:text-2xl lg:text-3xl font-bold text-indigo-500" style="animation-delay: 1s">服务器</span>
            <span class="message-cloud-item text-2xl md:text-3xl lg:text-4xl font-medium text-purple-400" style="animation-delay: 1.1s">羊毛</span>
            <span class="message-cloud-item text-xl md:text-2xl lg:text-3xl font-medium text-indigo-400" style="animation-delay: 1.2s">交流</span>
            <span class="message-cloud-item text-xl md:text-2xl lg:text-3xl font-medium text-yellow-400" style="animation-delay: 1.4s">互助</span>
            <span class="message-cloud-item text-2xl md:text-3xl lg:text-4xl font-medium text-pink-400" style="animation-delay: 1.5s">软件开发</span>
          </div>
        </div>

        <div class="absolute -top-20 -left30 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-32 -right20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
      </div>

<!--      <div class="mt-8 text-center text-sm text-blue-300">-->
<!--        <p>展示群里最常出现的关键词</p>-->
<!--      </div>-->
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const messageCloud = ref(null)

onMounted(() => {
  const words = messageCloud.value.querySelectorAll('.message-cloud-item')

  // 添加初始动画效果
  words.forEach((word, index) => {
    word.style.opacity = '0'
    word.style.transform = 'translateY(20px)'
    word.style.transition = 'all 0.6s ease'

    setTimeout(() => {
      word.style.opacity = '1'
      word.style.transform = 'translateY(0)'
    }, 100 + index * 100)
  })

  // 添加悬停动画
  words.forEach(word => {
    word.addEventListener('mouseenter', () => {
      word.style.transform = 'scale(1.2) rotate(3deg)'
      word.style.textShadow = '0 0 15px rgba(37, 99, 235, 0.7)'
    })

    word.addEventListener('mouseleave', () => {
      word.style.transform = 'scale(1) rotate(0)'
      word.style.textShadow = 'none'
    })
  })
})
</script>

<style scoped>
/* 消息云样式 */
</style>
